<template>
	<view class="mine">
		<navBar :title="titleName" :home="true"></navBar>
		<view class="loginBox" v-if="show">
		<login class="login" @showLogin="showSth"></login>
		</view>
		<view class="personal">
			<view class="title">
				<view class="img">
					<image :src="this.userInfo.avatar"></image>
				</view>
				<view class="titleName">
					<view>{{this.userInfo.name}}</view>
					<view>账号:{{this.userInfo.phone}}</view>
				</view>
			</view>
			<view class="desc">
				<text>个性签名：{{this.userInfo.desc}}</text>
			</view>
			<view class="my">
				<view class="myModule" @click="jumpMe">
					<view class="left">
						<u-icon name="file-text" color="#f3c3a2"></u-icon>
						<text>我的博客</text>
					</view>
					<u-icon name="arrow-right" color="#f3c3a2"></u-icon>
				</view>
				<view class="myModule" @click="jumpFollow">
					<view class="left">
						<u-icon name="star" color="#f3c3a2"></u-icon>
						<text>我的关注</text>
					</view>
					<u-icon name="arrow-right" color="#f3c3a2"></u-icon>
				</view>
				<view class="myModule" @click="jumpLike">
					<view class="left">
						<u-icon name="thumb-up"  color="#f3c3a2"></u-icon>
						<text>我的点赞</text>
					</view>
					<u-icon name="arrow-right" color="#f3c3a2"></u-icon>
				</view>
			</view>
			<view class="replay">
				<view class="myModule" @click="jump">
					<view class="left">  
						<u-icon name="setting" color="#f3c3a2"></u-icon>
						<text>修改个人信息</text>
					</view>
					<u-icon name="arrow-right"  color="#f3c3a2"></u-icon>
				</view>
			</view>
			<u-modal :show="cancelShow" :content='content' showCancelButton @cancel="cancelShow=false" @confirm="confirm"></u-modal>
			<u-button text="注销" type="primary" color="#fe630a" @click="cancelShow=true"></u-button>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	
	export default {
		data() {
			return {
				titleName:'我的',
				show:false,
				cancelShow:false,
				content:'是否确定要注销退出账号？'
			};
		},
		onLoad() {
			// 显示隐藏登陆页面
			if(JSON.stringify(this.userInfo)==='{}')
			// if(!Object.keys(this.userInfo).length)
			{
				this.show=true
				this.titleName="LOGIN"
			}
		},
		methods:{
			jumpMe(){uni.navigateTo({url:'/subpages/myBlog/myBlog'})},
			jumpFollow(){uni.navigateTo({url:'/subpages/follow/follow'})},
			jumpLike(){uni.navigateTo({url:'/subpages/like/like'})},
			showSth(){
				this.show=false
				this.titleName="我的"
			},
			jump(){uni.navigateTo({
				url:'/subpages/replace/replace'
			})},
			// 确认注销
			confirm() {
				localStorage.clear('userInfo')
				this.cancelShow=false
				// this.$set()
				uni.showToast({
					title:"注销成功",
					success:()=> {
						this.show=true
						this.titleName="LOGIN"
					}
				})
			}
		},
		computed:{
			...mapState(['userInfo'])
		}
	}
</script>


<style lang="scss">
	::v-deep .u-modal__content{
		text-align: center;
	}
	.loginBox{
		width: 100%;
		height: 100%;
		background-color: #fff;}
	.login {
		position: absolute;
		top: 8%;
		left: 50%;
		transform: translateX(-50%);
	}
	.mine{
		height: 100vh;
		background-color: #eee;
	}
	.personal{
		width: 100%;
		height: 70vh;
		box-sizing: border-box;
		padding:4vw;
	.title{
		width: 100%;
		height: 23vw;
		background-color: #fff;
		border-radius: 3vw;
		display: flex;
		align-items: center;
		margin-bottom: 3vw;
		font-size: 14px;
		.img{
			margin-left: 5vw;
			overflow: hidden;
			height: 20vw;
			width: 20vw;
			border-radius: 2vw;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.titleName{
			margin-left: 4vw;
			height: 20vw;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}
	}
	.desc{
			width: 100%;
			height: 12vw;
			background-color:#fff;
			border-radius: 3vw;
			margin-bottom: 3vw;
			text{
			display: block;
			margin-left: 5vw;
			line-height: 12vw;
			font-size: 14px;
				}
		}
	.my{
		width: 100%;
		height: 35vw;
		background-color:#fff;
		border-radius: 3vw;
		margin-bottom: 3vw;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.replay{
		width: 100%;
		height: 12vw;
		background-color:#fff;
		border-radius: 3vw;
		margin-bottom: 3vw;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.myModule{
		width: 90%;
		height: 10vw;
		border-bottom: 0.5vw #eee solid;
		display: flex;
		justify-content: space-between;
		.left{
		height: 10vw;
		display: flex;
		text{
			display: block;
			margin-left: 2vw;
			line-height: 10vw;
			}
		}
	}
	text{font-size: 15px;}
}
</style>
